<!-- 查看视频 -->
<template>
	<view class="container">
		<view class="MainBox">
			<!-- <video :vid="videoUrl" playerid="txv1"></video> -->
			<!-- <video :src="`${globalFileUrl}video/${videoUrl}`"></video> 
			-->
			<xiaoVideoElement src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"></xiaoVideoElement>
			
			<view class="cssBox" style="position: relative;">
				
				<view class="leftBox">
					<view class="margin-bottom-sm">
						<text class="text-bold text-xl">第三课·专学硕区别</text>
					</view>
					<!-- <view>
						<view class="fl margin-right text-df text-gray">
							<u-icon name="play-circle" style="margin-right: 5rpx;"></u-icon>
							<text>99.9w</text>
						</view>
					
						<view class="fl margin-right text-df text-gray">
							<u-icon name="order" style="margin-right: 5rpx;"></u-icon>
							<text>9999</text>
						</view>
					
						<view class="fl margin-right text-df text-gray">
							<u-icon name="clock" style="margin-right: 6rpx;"></u-icon>
							<text>2021-12-4</text>
						</view>
						<view style="clear: both;"></view>
					
					</view> -->
				</view>
				
				<!-- <button hover-class='none' class='rightBox' open-type="share">
					<u-icon label-color="green" label-size="26" margin-top="12" label-pos="bottom" label="分享一下" name="share" color="green" size="54"></u-icon>
				</button> -->
				
				

			</view>

			<view class="cssBox">
				<view class="margin-bottom-sm">
					<text class="text-bold text-lg">简介：</text>
				</view>
				<text class="text-df">每年都有大批的考生要参加考研考生，对于这些考生来说，大家对于考研的具体内容还不是很了解，从考试报名常识、考试报名流程到具体的备考规划，都有复杂的流程，以及重要的知识点需要大家掌握和了解，为了让大家更快速的入门，我们为大家提供了该课程</text>
			</view>
			
			<view class="cssBox">
				<view class="margin-bottom-sm flex justify-between">
					<text class="text-bold text-lg">选择课程：</text>
					<text class="text-gray text-df">共5节课/当前播放：第3节</text>
				</view>
				<view class="courseBox flex justify-around">
					<view >第一课 院校选择</view>
					<view >第二课 跨考专业</view>
					<view class="active">第三课 专学硕区别</view>
					<view>第四课 考研科目分析</view>
					<view>第五课 心态的调整</view>
				</view>
			</view>

			<view class="cssBox">
				<view class="margin-bottom-sm">
					<text class="text-bold text-lg">相关推荐</text>
				</view>
				<view class="cu-card article no-card">
					
					<view class="cu-item shadow">
						<view class="content" style="padding: 0;">
							<image src="../../../../static/picture5.png" mode="aspectFill"></image>
							<view class="desc">

								<view class="list_title">
									考研其实也是乐趣
								</view>

								<view class="list_content"> 世人为荣利缠缚，动曰尘世苦海。不知云白山青，川行石立，花迎鸟笑，谷答櫵讴，世亦不尘，海亦不苦，彼自尘苦其心尔。</view>
								<view class="flex justify-between">
									<view class="cu-tag bg-grey light sm round">
										<u-icon name="play-circle" style="margin-right: 2rpx;"></u-icon>
										999阅读量
									</view>
									<view class="cu-tag bg-grey light sm round">
										<u-icon name="clock" style="margin-right: 5rpx;"></u-icon>
										2021-12-04
									</view>
								</view>
							</view>
						</view>
					</view>
					
					<view class="cu-item shadow">
						<view class="content" style="padding: 0;">
							<image src="../../../../static/picture6.png" mode="aspectFill"></image>
							<view class="desc">
					
								<view class="list_title">
									计算机408报考指南
								</view>
					
								<view class="list_content"> 计算机学科专业基础综合的考试内容包括：数据结构、计算机组成原理、操作系统和计算机网络，</view>
								<view class="flex justify-between">
									<view class="cu-tag bg-grey light sm round">
										<u-icon name="play-circle" style="margin-right: 2rpx;"></u-icon>
										999阅读量
									</view>
									<view class="cu-tag bg-grey light sm round">
										<u-icon name="clock" style="margin-right: 5rpx;"></u-icon>
										2021-12-04
									</view>
								</view>
							</view>
						</view>
					</view>
					
				</view>
			</view>
		</view>
	</view>


	</view>
</template>

<script>
	import xiaoVideoElement from '../../../../components/xiao-video-component/xiao-video-component.vue'
	export default {
		components: {
			xiaoVideoElement,
		},
		data() {
			return {
			// 	globalFileUrl:'file:///static',
			// 	videoUrl: 'chooseUniversity.mp4',
			// 	src: 'https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20200317.mp4',
			// 	showVideo:false,
			// 	addVideo:true,
			// 	getData:[
			// 		{
			// 			title: 'uniapp开发',
			// 			studyNum: '335',
			// 			review: '35',
			// 			time: '2020-12-11',
			// 			synopsis: 'uni-app是一个使用Vue.js开发跨平台个人文库应用的前端框架,开发者编写一套代码,可编译到的iOS,安卓,H5,小程序等多个平台。',
			// 			item: [
			// 				{
			// 					title: "第一课",
			// 					name: "初识uniapp",
			// 					vidUrl: 'x3032spkh1m'
			// 				}
			// 			]
			// 		}
			// 	]
			 }
		},
		onReady: function(res) {
        // #ifndef MP-ALIPAY
        this.videoContext = uni.createVideoContext('myVideo')
        // #endif
    },
		onLoad() {
			
		},
		// 分享小程序
		onShareAppMessage(res) {
			return {
				title: '快速了解考研知识，一研为定'
			};
		},
		methods: {
			videoErrorCallback: function(e) {
				uni.showModal({
					content: e.target.errMsg,
					showCancel: false
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #f2f5f9;
	}

	.MainBox {
		width: 750rpx;

		video {
			width: 750rpx;
		}
	}

	.cssBox {
		padding: 20rpx 30rpx;
		background-color: #FFFFFF;
		margin-bottom: 15rpx;
	}
	.rightBox{
		width: 150rpx;
		height: 100%;
		position: absolute;
		right: 20rpx;
		top: 0;
		text-align: center;
		line-height: 120rpx;
		padding: 0;
		background: none;
	}

	.list_title {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		overflow: hidden;
		font-size: 30rpx;
		font-weight: 600;
		color: #333333;
	}

	.list_content {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		word-break: break-all;
		font-size: 28rpx;
		color: #888;
	}
	
	.courseBox{
		    display: flex;
		    flex-wrap: wrap;
		    justify-content: space-between;
			margin-left: -10px;
		view{
			width: 240rpx;
			height: 58rpx;
			border: 2rpx solid #909399;
			text-align: center;
			line-height: 58rpx;
			-webkit-border-radius: 6px;
			border-radius: 12rpx;
			margin:10rpx 0 20rpx;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 1;
			overflow: hidden;
			word-break: break-all;
			font-size: 24rpx;
			color: #909399;
			padding: 0 6rpx;
		}
		.active{
			border: 2rpx solid #18BC37;
			background-color: #18BC37;
			color: #FFFFFF;
		}
	}
	.courseBox::after {
	    content: "";
		flex: auto; 
	}
	.courseBox>view {
		margin-left: 10px;
		margin-bottom: 10px;
		width: -webkit-calc((100% - 10px*3)/ 3);
		width: calc((100% - 10px*3)/ 3);
	}
	button::after {
		border: none;
		padding: 0;
	}
	.page video{
		width: 750rpx;
	}
</style>
